<template>
  <div class="app-container">
    <el-row :gutter="10">

      <!--      软件列表-->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span>软件列表</span>
            <div style="float: right; display: flex;justify-content: center;gap: 10px">


              <el-input
                size="mini"
                v-model="softwareQueryParams.softwareName"
                placeholder="请输入软件名称"
                clearable
                @keyup.enter.native="handleQuerySoftware"
              />
              <el-button
                icon="el-icon-search"
                @click="handleQuerySoftware"
                type="text"
                size="mini"
              ></el-button>


              <el-button
                icon="el-icon-plus"
                @click="handleAddSoftware"
                type="text"
                size="mini"
                v-hasPermi="['software:softwares:add']"
              ></el-button>

              <el-button
                icon="el-icon-refresh-right"
                @click="handleQuerySoftware"
                type="text"
                size="mini"
              ></el-button>
            </div>
          </div>
          <el-table v-loading="loading" :data="softwareList" @row-click="handleSoftwareClick"
                    :row-style="clickSoftwareStyle" size="mini">
            <el-table-column label="软件名称" align="center" prop="softwareName"/>
            <el-table-column label="更新时间" align="center" prop="updateTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateSoftware(scope.row)"
                  v-hasPermi="['software:softwares:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteSoftware(scope.row)"
                  v-hasPermi="['software:softwares:remove']"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="softwareTotal>0"
            :total="softwareTotal"
            small
            layout="total, prev, pager, next"
            :page.sync="softwareQueryParams.pageNum"
            :limit.sync="softwareQueryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>

      <!--      软件版本-->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span> {{ versionListTitle }}</span>
            <div style="float: right; display: flex;justify-content: center;">
              <el-button v-show="clickSoftwareId"
                         type="text"
                         icon="el-icon-plus"
                         @click="handleAddVersion"
                         circle
                         size="mini"
                         v-hasPermi="['software:version:add']"
              ></el-button>
              <el-button
                type="text"
                circle
                size="mini"
                icon="el-icon-refresh-right"
              ></el-button>
            </div>
          </div>
          <el-table v-loading="loadingVersion" :data="versionList" @row-click="handleVersionClick"
                    :row-style="clickVersionStyle" size="mini">
            <el-table-column label="版本名称" align="center" prop="versionName"/>
            <el-table-column label="系统版本" align="center" prop="description"/>
            <el-table-column label="更新时间" align="center" prop="updateTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateVersion(scope.row)"
                  v-hasPermi="['software:version:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteVersion(scope.row)"
                  v-hasPermi="['software:version:remove']"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="versionTotal>0"
            :total="versionTotal"
            :hide-on-single-page="true"
            small
            layout="total, prev, pager, next"
            :page.sync="versionQueryParams.pageNum"
            :limit.sync="versionQueryParams.pageSize"
            @pagination="getVersionList(clickSoftwareId)"
          />
        </el-card>
      </el-col>

      <!--下载链接列表-->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span> {{ linkListTitle }}</span>
            <div style="float: right; display: flex;justify-content: center;">
              <el-button v-show="clickVersionId"
                         type="text"
                         icon="el-icon-plus"
                         @click="handleAddLink"
                         circle
                         size="mini"
                         v-hasPermi="['software:link:add']"
              ></el-button>
              <el-button
                type="text"
                circle
                size="mini"
                icon="el-icon-refresh-right"
              ></el-button>
            </div>
          </div>
          <el-table v-loading="loadingLink" :data="linkList" size="mini">
            <el-table-column label="下载方式" align="center" prop="linkName"/>
            <el-table-column label="下载地址" align="center" prop="linkUrl" :show-overflow-tooltip="true"/>
            <el-table-column label="更新时间" align="center" prop="updateTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateLink(scope.row)"
                  v-hasPermi="['software:version:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteLink(scope.row)"
                  v-hasPermi="['software:version:remove']"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 软件添加或修改软件对话框 -->
    <el-dialog :title="versionTitle" :visible.sync="openSoftware" width="500px" append-to-body>
      <el-form ref="form" :model="softwareForm" :rules="softwareRules" label-width="80px">
        <el-form-item label="软件名称" prop="softwareName">
          <el-input v-model="softwareForm.softwareName" placeholder="请输入软件名称"/>
        </el-form-item>
        <el-form-item label="软件别名" prop="aliasName">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

          <!--          <el-input v-model="form.aliasName" placeholder="请输入软件别名" />-->
        </el-form-item>
        <el-form-item label="最低价" prop="minPrice">
          <el-input v-model="softwareForm.minPrice" placeholder="请输入最低价"/>
        </el-form-item>
        <el-form-item label="最高价" prop="maxPrice">
          <el-input v-model="softwareForm.maxPrice" placeholder="请输入最高价"/>
        </el-form-item>
<!--        <el-form-item label="状态 " prop="softwareStatus">-->
<!--          <el-radio-group v-model="softwareForm.softwareStatus">-->
<!--            <el-radio-->
<!--              v-for="dict in dict.type.software_status"-->
<!--              :key="dict.value"-->
<!--              :label="dict.value"-->
<!--            >{{ dict.label }}-->
<!--            </el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="softwareForm.description" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="softwareForm.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSoftwareForm">确 定</el-button>
        <el-button @click="softwareCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 版本添加或修改软件版本对话框 -->
    <el-dialog :title="linkTitle" :visible.sync="openVersion" width="500px" append-to-body>
      <el-form ref="form" :model="versionForm" label-width="80px">

        <el-form-item label="版本名称" prop="versionName">
          <el-input v-model="versionForm.versionName" placeholder="请输入版本名称"/>
        </el-form-item>
        <el-form-item label="版本别名" prop="aliasName">
          <el-input v-model="versionForm.aliasName" placeholder="请输入版本别名"/>
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="versionForm.description" placeholder="请输入描述信息"/>
        </el-form-item>
<!--        <el-form-item label="版本状态" prop="versionStatus">-->
<!--          <el-radio-group v-model="versionForm.versionStatus">-->
<!--            <el-radio-->
<!--              v-for="dict in dict.type.software_status"-->
<!--              :key="dict.value"-->
<!--              :label="dict.value"-->
<!--            >{{ dict.label }}-->
<!--            </el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="versionForm.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitVersionForm">确 定</el-button>
        <el-button @click="versionCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 链接添加或修改下载链接对话框 -->
    <el-dialog :title="title" :visible.sync="openLink" width="500px" append-to-body>
      <el-form ref="form" :model="linkForm" :rules="linkRules" label-width="80px">

        <el-form-item label="方式" prop="linkName">
          <el-input v-model="linkForm.linkName" placeholder="请输入链接名称"/>
        </el-form-item>
        <el-form-item label="地址" prop="linkUrl">
          <el-input v-model="linkForm.linkUrl" placeholder="请输入链接地址"/>
        </el-form-item>
<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-radio-group v-model="linkForm.status">-->
<!--            <el-radio-->
<!--              v-for="dict in dict.type.sys_normal_disable"-->
<!--              :key="dict.value"-->
<!--              :label="dict.value"-->
<!--            >{{ dict.label }}-->
<!--            </el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="linkForm.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLinkForm">确 定</el-button>
        <el-button @click="linkCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listSoftwares, getSoftwares, delSoftwares, addSoftwares, updateSoftwares} from "@/api/software/softwares";
import {listVersion, getVersion, delVersion, addVersion, updateVersion} from "@/api/software/version";
import {listLink, getLink, delLink, addLink, updateLink} from "@/api/software/link";

export default {
  name: "Edition",
  dicts: ['software_status', 'sys_normal_disable'],

  data() {
    return {
      // 遮罩层
      loading: true,
      softwareTotal: 0,
      versionTotal: 0,
      softwareQueryParams: {
        pageNum: 1,
        pageSize: 10,
        softwareName: null,
        aliasName: null,
        softwareStatus: null,
      },
      versionQueryParams: {
        pageNum: 1,
        pageSize: 10,
        softwareId: null,
      },
      loadingVersion: false,
      loadingLink: false,
      clickSoftwareId: null,
      clickVersionId: null,
      softwareList: [],
      versionList: [],
      linkList: [],
      // 表单参数
      softwareForm: {},
      linkForm: {},
      title: "",
      versionTitle: "",
      linkTitle: "",
      versionListTitle: "版本列表",
      linkListTitle: "链接列表",
      // 别名添加状态
      inputVisible: false,
      // 别名值
      inputValue: '',
      // 别名列表
      dynamicTags: [],
      // 是否显示弹出层
      openSoftware: false,
      // 是否显示弹出层
      openVersion: false,
      // 是否显示弹出层
      openLink: false,
      itemClickStyle: {
        backgroundColor: '#ebebeb',
        cursor: 'pointer',
        height:'40',
        transition: 'background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease'
      },
      // 表单校验
      softwareRules: {
        softwareName: [
          {required: true, message: "软件名称不能为空", trigger: "blur"}
        ],
        minPrice: [
          {required: true, message: "最低价不能为空", trigger: "blur"}
        ],
        maxPrice: [
          {required: true, message: "最高价不能为空", trigger: "blur"}
        ]
      },
      // 表单参数
      versionForm: {},
      // 表单校验
      linkRules: {
        linkName: [
          {required: true, message: "链接名称不能为空", trigger: "blur"}
        ],
        linkUrl: [
          {required: true, message: "链接地址不能为空", trigger: "blur"}
        ],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true;
      listSoftwares(this.softwareQueryParams).then(response => {
        this.softwareList = response.rows;
        this.softwareTotal = response.total
        this.loading = false;
      });
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },


    resetSoftwareFrom() {
      this.softwareForm = {
        softwareId: null,
        softwareName: null,
        aliasName: null,
        minPrice: null,
        maxPrice: null,
        softwareStatus: 1,
        description: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      };
      this.dynamicTags = []
      this.resetForm("form");
    },
    /** 删除软件操作 */
    handleDeleteSoftware(row) {
      const softwareIds = row.softwareId || this.ids;
      this.$modal.confirm('是否确认删除软件"' + row.softwareName + '"？').then(function () {
        return delSoftwares(softwareIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    /** 搜索按钮操作 */
    handleQuerySoftware() {
      this.softwareQueryParams.pageNum = 1;
      this.getList();
    },

    /** 新增版本操作 */
    handleAddSoftware() {
      this.resetSoftwareFrom();

      this.openSoftware = true;
      this.title = "添加软件";
    },
    /** 修改版本操作 */
    handleUpdateSoftware(row) {
      this.resetSoftwareFrom();
      // aliasName 转换成数组
      if (row.aliasName) {
        this.dynamicTags = row.aliasName.split(",")
      }
      const softwareId = row.softwareId || this.ids
      getSoftwares(softwareId).then(response => {
        this.softwareForm = response.data;
        this.openSoftware = true;
        this.title = "修改软件";
      });
    },

    /**根据软件ID获取版本列表*/
    getVersionList(id) {
      this.versionQueryParams.softwareId=id;
      listVersion(this.versionQueryParams).then(response => {
        this.versionList = response.rows;
        this.versionTotal=response.total
        this.loadingVersion = false;
      });
    },

    /** 软件提交 */
    submitSoftwareForm() {
      this.softwareForm.aliasName = this.dynamicTags.toString()
      this.softwareForm.softwareStatus =1
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.softwareForm.softwareId != null) {
            updateSoftwares(this.softwareForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openSoftware = false;
              this.getList();
            });
          } else {
            addSoftwares(this.softwareForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openSoftware = false;
              this.getList();
            });
          }
        }
      });
    },
    handleSoftwareClick(row) {
      this.versionListTitle = row.softwareName
      this.clickSoftwareId = row.softwareId
      this.loadingVersion = true;
      this.clickVersionId = null;
      this.getVersionList(row.softwareId)
    },

    clickSoftwareStyle({row}) {
      if (this.clickSoftwareId === row.softwareId) {
        return this.itemClickStyle
      }
      return {cursor: 'pointer',height: '24px'};
    },
    clickVersionStyle({row}) {
      if (this.clickVersionId === row.versionId) {
        return this.itemClickStyle
      }
      return {cursor: 'pointer'};
    },

    /** 版本提交*/
    submitVersionForm() {
      this.versionForm.softwareId = this.clickSoftwareId
      this.versionForm.versionStatus =1
      this.$refs["form"].validate(valid => {
        console.log(this.versionForm)
        if (valid) {
          if (this.versionForm.versionId != null) {
            updateVersion(this.versionForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openVersion = false;
              this.getVersionList(this.clickSoftwareId);
            });
          } else {
            addVersion(this.versionForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openVersion = false;
              this.getVersionList(this.clickSoftwareId);
            });
          }
        }
      });
    },
    // 取消按钮
    softwareCancel() {
      this.openSoftware = false;
      this.resetSoftwareFrom();
    },
    // 版本取消按钮
    versionCancel() {
      this.openVersion = false;
      this.resetVersionFrom();
    },
// 链接取消按钮
    linkCancel() {
      this.openLink = false;
      this.resetLinkFrom();
    },
    resetVersionFrom() {
      this.versionForm = {
        versionId: null,
        softwareId: null,
        versionName: null,
        description: null,
        versionStatus: 1,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 删除软件版本操作 */
    handleDeleteVersion(row) {
      const versionIds = row.versionId || this.ids;
      this.$modal.confirm('是否确认删除软件"' + row.softwareName + '"的"' + row.versionName + '"版本？').then(function () {
        return delVersion(versionIds);
      }).then(() => {
        this.getVersionList(this.clickSoftwareId);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    /** 版本新增按钮操作 */
    handleAddVersion() {
      this.resetVersionFrom();
      this.openVersion = true;
      this.versionTitle = this.versionListTitle;
    },
    /** 版本修改按钮操作 */
    handleUpdateVersion(row) {
      this.resetVersionFrom();
      const versionId = row.versionId || this.ids
      getVersion(versionId).then(response => {
        this.versionForm = response.data;
        this.openVersion = true;
        this.title = this.versionListTitle
      });
    },
    /** 点击版本列表*/
    handleVersionClick(row) {
      this.linkListTitle = row.versionName
      this.clickVersionId = row.versionId
      this.loadingLink = true;
      this.getLinkList(row.versionId)
    },

    /** 获取链接列表*/
    getLinkList(id) {
      this.loadingLink = true;
      listLink({versionId: id}).then(response => {
        this.linkList = response.rows;

        this.loadingLink = false;
      });
    },
    /** 提交按钮 */
    submitLinkForm() {
      this.linkForm.softwareId = this.clickSoftwareId;
      this.linkForm.status =1
      this.linkForm.versionId = this.clickVersionId
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.linkForm.linkId != null) {
            updateLink(this.linkForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openLink = false;
              this.getLinkList(this.clickVersionId);
            });
          } else {
            addLink(this.linkForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openLink = false;
              this.getLinkList(this.clickVersionId);
            });
          }
        }
      });
    },
    /**链接重置按钮*/
    resetLinkFrom() {
      this.linkForm = {
        linkId: null,
        versionId: null,
        linkName: null,
        linkUrl: null,
        status: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 删除软件链接操作 */
    handleDeleteLink(row) {
      const linkIds = row.linkId || this.ids;
      this.$modal.confirm('是否确认删除软件"' + row.softwareName + '"下的"' + row.versionName + '"版本的"' + row.linkName + '"下载方式？').then(function () {
        return delLink(linkIds);
      }).then(() => {
        this.getLinkList(this.clickVersionId);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    /** 链接新增按钮操作 */
    handleAddLink() {
      this.resetLinkFrom();
      this.openLink = true;
      this.linkTitle = this.linkListTitle
    },
    /** 链接修改按钮操作 */
    handleUpdateLink(row) {
      this.resetLinkFrom();
      const linkId = row.linkId || this.ids
      getLink(linkId).then(response => {
        this.linkForm = response.data;
        this.openLink = true;
        this.linkTitle = this.linkListTitle;
      });
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

</style>
